<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景图尺寸</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 200px;
        height: 150px;
        margin: 100px auto;
        border: 2px solid orange;
        background: url(./images/img100px.png) no-repeat;
        /* 
        background-size
            - 宽、高
                精确数值，带单位
                百分比，以父容器为参照，
                只写一个，另一个会等比例缩放
            - cover
                图片延伸拓展到足够覆盖整个父容器
                缺点是溢出的图片部分不能显示出来
            - contain
                图片宽、或高等比例缩放拉伸，当其中一方提前等同于父容器的宽、或高后结束拉伸
                缺点是一个先铺满，另一方就不再延伸，可能导致父容器不能被完全覆盖，会留出空白区域
            拓展
              1）只要图片和父容器都是正方形，则cover、contain会刚好铺满
              2）只要图片和父容器是倍数关系的大小，cover、contain也会刚好铺满
              3）因为cover、contain是等比例拉伸放大的，会有模糊问题，利用【倍图】可以解决模糊问题
        */
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
